<?php include("includes/header.php"); ?>

<div class="container-alert hide">
    <div class="alert alert-danger hide">
        <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
        <strong>Error</strong> Unable to proccess your reservation, please try again. Thank You.
    </div>
    <div class="alert alert-success hide">
        <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
        <strong>Success</strong> Your reservation has been proccessed, please wait and check your email for confirmation of your reservation. Thank You.
    </div>
</div>

<div class="sending hide">
    Sending your reservation...
    <div class="modal-backdrop fade in"></div>
</div>

<div class="row container-content">
    <form action="contact-reservation-proses.php" method="post" id="form-reservation" onsubmit="return val()">
        <div class="col-md-6">
            <h1>Reservation</h1>
            <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                <div class="form-group">
                    <label for="name"><span style="color: #FF0000;">*</span>Room Type</label>
                    <select name="r_type" id="r_type" class="form-control">
                        <option value="">- - Select Room Type - -</option>
                        <option value="Deluxe">Deluxe</option>
                        <option value="Two Bedroom Suite">Two Bedroom Suite</option>
                        <option value="Five Bedroom Pool Villa">Five Bedroom Pool Villa</option>
                    </select>
                </div>
            </div>
            <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                <div class="form-group">
                    <label><span style="color: #FF0000;">*</span>Airport Pickup</label>
                    <div class="form-control">
                        <label>
                            <input type="radio" name="pickup" id="pickup_yes" value="Pickup">
                            Yes
                        </label>
                        <label style="padding-left: 30px;">
                            <input type="radio" name="pickup" id="pickup_no" value="No Pickup">
                            No
                        </label>
                    </div>
                </div>
            </div>
            <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                <div class="form-group">
                    <label for="name"><span style="color: #FF0000;">*</span>Check-In Date</label>
                    <div class="input-group date date1" data-date-format="DD-MM-YYYY">
                        <input readonly="readonly" id="check_in" type="text" class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                <div class="form-group">
                    <label for="name"><span style="color: #FF0000;">*</span>Check-Out Date</label>
                    <div class="input-group date date2" data-date-format="DD-MM-YYYY">
                        <input readonly="readonly" id="check_out" type="text" class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                <div class="form-group">
                    <label for="name">Number of Adult(s)</label>
                    <div class='input-group'>
                        <input readonly="readonly" type="text" id="adult" class="form-control" value="0" />
                        <span class="input-group-btn">
                            <span class="btn btn-default a_plus" data-toggle="tooltip" data-placement="bottom" data-original-title="Increase" onmouseover="$(this).tooltip('show')"><i class="glyphicon glyphicon-chevron-up"></i></span>
                            <span class="btn btn-default a_min" data-toggle="tooltip" data-placement="bottom" data-original-title="Decrease" onmouseover="$(this).tooltip('show')"><i class="glyphicon glyphicon-chevron-down"></i></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                <div class="form-group">
                    <label for="name">Number of Children(s)</label>
                    <div class='input-group'>
                        <input readonly="readonly" type="text" id="children" class="form-control" value="0" />
                        <span class="input-group-btn">
                            <span class="btn btn-default c_plus" data-toggle="tooltip" data-placement="bottom" data-original-title="Increase" onmouseover="$(this).tooltip('show')"><i class="glyphicon glyphicon-chevron-up"></i></span>
                            <span class="btn btn-default c_min" data-toggle="tooltip" data-placement="bottom" data-original-title="Decrease" onmouseover="$(this).tooltip('show')"><i class="glyphicon glyphicon-chevron-down"></i></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h1>Personal Information</h1>
                <div class="form-group">
                    <label for="name"><span style="color: #FF0000;">*</span>Name</label>
                    <input type="text" class="form-control" id="name" name="name">
                </div>
                <div class="col-xs-6" style="padding: 0; padding-right: 5px;">
                    <div class="form-group">
                        <label for="email"><span style="color: #FF0000;">*</span>E-mail</label>
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                </div>
                <div class="col-xs-6" style="padding: 0;">
                    <div class="form-group">
                        <label for="phone"><span style="color: #FF0000;">*</span>Phone</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone">Note / Special Request</label>
                    <textarea class="form-control" id="note" name="note"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-success">Reset</button>
        </div>
    </form>
</div>

<?php include("includes/footer.php"); ?>

<!-- Modal -->
<div class="modal fade" data-backdrop="static" id="modalKosong" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Attention</h4>
            </div>
            <div class="modal-body">
                Please complete the form bellow. Thank you.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function val() {
        r_type = $('#r_type').val();
        check_in = $('#check_in').val();
        check_out = $('#check_out').val();
        adult = $('#adult').val();
        children = $('#children').val();
        pickup_yes = $('#pickup_yes').is(':checked');
        pickup_no = $('#pickup_no').is(':checked');
        name = $('#name').val();
        email = $('#email').val();
        phone = $('#phone').val();
        param = true;
        if(r_type == '' || check_in == '' || check_out == '' || (pickup_yes == false && pickup_no == false) || name == '' || email == '' || phone == '')
        {
            $('#modalKosong').modal('show');
            return false;
        } else {         
            if(adult == 0 && children == 0) {
                $('#adult').closest('div').addClass('has-error');
                $('#children').closest('div').addClass('has-error');
                param = param && false;
            } else {
                $('#adult').closest('div').removeClass('has-error');
                $('#children').closest('div').removeClass('has-error');
                param = param && true;
            }
            if(phone/phone != 1) {
                $('#phone').closest('div').addClass('has-error');
                param = param && false;
            } else {
                $('#phone').closest('div').removeClass('has-error');
                param = param && true;
            }
            if(param == true) {
                return false;
                $(".sending").removeClass('hide');
                if($('#pickup_yes').is(':checked'))
                {
                    valPickup = 'Yes';
                } else
                {
                    valPickup = 'No';
                }
                $.ajax({
                    url: 'reservation-proses.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        r_type: $('#r_type').val(),
                        check_in: $('#check_in').val(),
                        check_out: $('#check_out').val(),
                        adult: $('#adult').val(),
                        children: $('#children').val(),
                        pickup: valPickup,
                        name: $('#name').val(),
                        email: $('#email').val(),
                        phone: $('#phone').val(),
                        note: $('#note').val()
                    },
                })
                .done(function(data) {
                    $('.sending').addClass('hide');
                    console.log("success");
                    if(data.msg == 1)
                    {
                        $('.container-alert').removeClass('hide');
                        $('.alert-danger').removeClass('hide');
                        $('.alert-success').addClass('hide');
                    }
                    if(data.msg == 0)
                    {
                        $('.container-alert').removeClass('hide');
                        $('.alert-success').removeClass('hide');
                        $('.alert-danger').adClass('hide');
                    }
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
            } else {
                return false;
            }
        }
    }

    $(document).ready(function() {
        $(function () {
            $('.date1').datetimepicker({
                useCurrent: false,
                pickTime: false
            });
        });
        $(function () {
            $('.date2').datetimepicker({
                useCurrent: false,
                pickTime: false
            });
        });

        $('.a_plus').click(function(event) {
            nmr = parseInt($('#adult').val())+1;
            $('#adult').val(nmr);
        });
        $('.a_min').click(function(event) {
            nmr = parseInt($('#adult').val())-1;
            if(nmr <= 0)
            {
                nmr = 0;
            }
            $('#adult').val(nmr);
        });

        $('.c_plus').click(function(event) {
            nmr = parseInt($('#children').val())+1;
            $('#children').val(nmr);
        });
        $('.c_min').click(function(event) {
            nmr = parseInt($('#children').val())-1;
            if(nmr <= 0)
            {
                nmr = 0;
            }
            $('#children').val(nmr);
        });
        $('.container-alert').on('click', '.close', function(event) {
            event.preventDefault();
            $('.container-alert').addClass('hide');
        });
    });
</script>